<template>
  <div>
    <div class="table">
      <template>
        <el-table
          ref="multipleTable"
          :data="projectList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="项目名称"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="toDetails">{{
                  projectList[scope.$index].name
                }}</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="120" label="项目开始时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ projectList[scope.$index].startDataPlan }}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="120" label="项目结束时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ projectList[scope.$index].endDataPlan }}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="300" prop="introduction" label="项目介绍" align="center">
          </el-table-column>
          <!-- <el-table-column prop="operator" label="操作人" align="center">
          </el-table-column>
          <el-table-column label="操作时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ projectList[scope.$index].oprateTime }}
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </template>
    </div>
    <div class="search-panel" style="text-align:center;margin-top:15px;margin-bottom:30px">
      <el-button
        @click="confirm"
        type="primary"
      >
        提交
      </el-button>
    </div>
    <el-row class="page">
      <div class="page-tag">
        共{{ Math.ceil(totalData / pageSize) }}页/{{
          totalData
        }}条数据
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="sizes,prev, pager, next, jumper"
        :total="totalData"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import projectApi from "@/api/acl/project";
export default {
  data() {
    return {
      selectedList: [],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      options: [10, 20, 30, 40],
      projectList: [],
      roleId:'',
      roleProjectListIds:[]
    };
  },
  created() {
    this.roleId = this.$route.query.id
    this.fetchData();
    this.getProjectIdsByRole(this.roleId)
  },
  methods: {
    handleSelectionChange(res) {
      this.selectedList = res;
    },
    handleSizeChange(){},
    handleCurrentChange() {
      // console.log(this.currentPage);
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    toDetails() {
      // this.$router.push({path:'authorization/details'})
    },
    // 加载项目数据
    fetchData() {
      // 异步获取远程数据（ajax）
      projectApi.getProjectList().then((response) => {
        console.log('res',response);
        this.projectList = response.data.projectList;
        // 数据加载并绑定成功
        this.listLoading = false;
        this.totalData = this.projectList.length
      });
    },
    getProjectIdsByRole(roleId) {
      projectApi.getProjectIdsByRole(roleId).then(res => {
        this.roleProjectListIds = res.data.myProjectIds
      })
    },
    confirm() {
      let ids = []
      this.selectedList.forEach(function(item,index) {
        ids.push(item.id)
      })
      projectApi.distributeEventToRole(ids,this.roleId).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '数据授权成功!'
          })
          this.$router.push({ path: '/system/roleList' })
        }
      })
    },
    toggleSelection (rows) {
      var roleProjectListIds = this.roleProjectListIds
      rows.forEach(row => {
        for(var i=0;i<roleProjectListIds.length;i++){
          if(roleProjectListIds[i]==row.id){
            this.$refs.multipleTable.toggleRowSelection(row, true)
            break;
          }
        }
      })
    },
  },
  updated(){
    this.toggleSelection(this.projectList)
  },
};
</script>
<style lang="scss" scoped>
.table {
  margin-top: 10px;
}
.list-block {
  width: 100%;
  height: 50px;
  text-align: right;
  margin-top: -1px;
  background-color: #ffffff;
  padding-top: 10px;
  //   border: solid 2px #e4e4e4;
  padding-right: 10px;
  justify-content: flex-end;
  .page-tag {
    font-size: 13px;
    line-height: 30px;
  }
}
</style>
